import axios from 'axios';
import React from 'react';
import './Heroscon.css'
import { useState } from 'react';
import { useEffect } from 'react';
import { useLocation, useParams, useSearchParams } from 'react-router-dom';

function Heroscon(props) {
    let [singleherodata, setSingleherodata] = useState({});
    // let { id } = useParams(); // useParams hook传参 params传参
    // console.log(id);
    // let [search, setSearch] = useSearchParams(); // useSearchParams hook传参 query传参
    // console.log(search.get("id"));
    // let id = search.get("id")
    // console.log(id);
    let { state } = useLocation();
    // console.log(state);
    let id = state.id;
    // console.log(id);

    useEffect(() => {
        async function main() {
            let result = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
            console.log(result.data);
            setSingleherodata(result.data);
        };
        main();
    }, [])


    return (
        <div className="heros-con">
            <div className="heros-left">
                <img src={singleherodata.image ? `http://cdn.xiaohigh.com${singleherodata.image}` : ''} alt="" />
                <h2>
                    {
                        singleherodata.name ? singleherodata.name : null
                    }
                </h2>
                <h3>
                    {
                        singleherodata.ytpe ? singleherodata.type : null
                    }
                </h3>
                <div className="img-min">
                    <ul>
                        {
                            singleherodata.skills && singleherodata.skills.map((item, index) => {
                                return (<li key={index}>
                                    <img src={`http://cdn.xiaohigh.com/${item.img}`} alt="" />
                                    <h4>{item.name}</h4>
                                </li>)
                            })
                        }

                    </ul>
                </div>
            </div>
            <div className="heros-right">
                <img src={singleherodata.big_image ? `http://cdn.xiaohigh.com${singleherodata.big_image}` : ''} alt="" />
                <hr />
                <p dangerouslySetInnerHTML={{ __html: singleherodata.intro }}></p >
            </div >
        </div >
    );
}

export default Heroscon;